<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-07-25 16:39:11
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-07-29 08:35:45
 * @FilePath: /vue3-uniapp/src/pages/tabbar/HomeView/components/RoleFunctions/RoleFunctions.vue
-->
<script lang="ts" setup>
import { useUserStore } from '@/store';
import { getStaticImage } from '@/utils/index';

const { currentRole, currentRoleId, roleFunctions } =
    storeToRefs(useUserStore());

const functions = computed(() => {
    if (currentRoleId) {
        return roleFunctions.value.filter((it) =>
            currentRoleId.value ? it.auth.includes(currentRoleId.value) : false
        );
    }
    return [];
});

const tapFunction = (item: (typeof roleFunctions)['value'][0]) => {
    if (item.route) {
        uni.$uv.route(item.route);
    }
};
</script>

<template>
    <view
        class="rolefunctions-container mt-[24rpx]"
        v-if="currentRole && functions.length > 0"
    >
        <view class="header">
            <!-- <image
                :src="getStaticImage('/index/head_frame.png')"
                style="width: 100; height: 88rpx"
            /> -->
            <text class="title c-text text-base fw-700"
                >{{ currentRole?.name }}专属功能</text
            >
        </view>

        <view class="content">
            <view
                class="item"
                v-for="(item, idx) in functions"
                :key="idx"
                @click="() => tapFunction(item)"
            >
                <image :src="item.img" style="width: 80rpx; height: 80rpx" />
                <view class="c-text2 text-sm mt-[16rpx]">{{ item.title }}</view>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.rolefunctions-container {
    background: var(--bg-front);
    border-radius: 16rpx;
    padding: 4rpx;

    .header {
        position: relative;
        height: 88rpx;
        width: 100%;
        border-radius: 16rpx 16rpx 0 0;
        overflow: hidden;
        background: var(--bg-lightblue);
        .title {
            position: absolute;
            padding: 0 32rpx;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
    }

    .content {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-bottom: 32rpx;

        .item {
            text-align: center;
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 32rpx;
        }
    }
}
</style>
